<template>
  <div class="home" ref="home">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      :immediate-check="false"
      :offset="100"
      finished-text="没有更多了"
      @load="getList"
    >
      <TopTab v-model:active="active" :class="{ isFixed }"> </TopTab>
      <div class="content" :class="{ isFixed }">
        <component
          :is="active === 0 ? 'Swipe' : 'Banner'"
          :data="Banners"
        ></component>
        <List :data="list" />
      </div>

      <BottomTab />
    </van-list>
  </div>
</template>

<script lang='ts'>
import scrollHook from "./hooks/scroll";
import swipeHook from "./hooks/swipe";
import listHook from "./hooks/list";

import { defineAsyncComponent, ref, watch } from "vue";
export default {
  components: {
    TopTab: defineAsyncComponent(() => import("@/components/TopTab.vue")),
    BottomTab: defineAsyncComponent(() => import("@/components/BottomTab.vue")),
    Swipe: defineAsyncComponent(() => import("@/components/Swipe.vue")),
    List: defineAsyncComponent(() => import("./component/list.vue")),
    Banner: defineAsyncComponent(() => import("./component/banner.vue")),
  },
  setup() {
    const { isFixed } = scrollHook();
    const { Banners } = swipeHook();
    const { loading, finished, getList, list, rest } = listHook();
    const active = ref(0);
    watch(active, () => {
      rest(active.value);
    });
    return { active, isFixed, Banners, loading, finished, getList, list };
  },
};
</script>

<style lang="scss" scoped>
.home {
  margin-bottom: 50px;
}

.content {
  margin-top: 0;
  &.isFixed {
    margin-top: 40px;
  }
}
</style>
